@import './var.scss';


.flex {display: flex;}
.justify-center {display: flex; justify-content: center;}
.justify-end{display: flex; justify-content: flex-end;}
.justify-around{display: flex; justify-content: space-around;}
.justify-between{display: flex; justify-content: space-between;}
.justify-evenly{display: flex; justify-content: space-evenly;}
.items-center{display: flex; align-items: center;}
.items-end{display: flex; align-items: flex-end;}
.items-baseline{display: flex; align-items: baseline;}
.item-stretch {display: flex; align-items: stretch;}
.self-end {display: flex; align-self: end;}
.self-center {display: flex; align-self: center;}
.flex-center {display: flex; align-items: center; justify-content: center;}
.flex-col {flex-direction: column;}
.flex-1 {flex:1}
.flex-2 {flex:2}
.flex-3 {flex:3}
.flex-4 {flex:4}
.flex-5 {flex:5}
.flex-6 {flex:6}
.flex-7 {flex:7}
.flex-8 {flex:8}
.flex-9 {flex:9}

// 换行后
.flex-wrap {flex-wrap: nowrap;}
.content-end { align-content: flex-end;}
.content-center { align-content: center;}
.content-between { align-content: space-between;}
.content-around { align-content: space-around;}

.text-center {text-align: center;}
.text-end {text-align: end;}

/**
  f ---------- font
  m ---------- margin
  p ---------- padding
*/


.f-12 {font-size: $font-12;}
.f-13 {font-size: $font-13;}
.f-14 {font-size: $font-14;}
.f-15 {font-size: $font-15;}
.f-16 {font-size: $font-16;}
.f-17 {font-size: $font-17;}
.f-18 {font-size: $font-18;}
.f-19 {font-size: $font-19;}
.f-20 {font-size: $font-20;}
.f-21 {font-size: $font-21;}
.f-22 {font-size: $font-22;}
.f-23 {font-size: $font-23;}
.f-24 {font-size: $font-24;}
.f-25 {font-size: $font-25;}
.f-26 {font-size: $font-26;}
.f-27 {font-size: $font-27;}
.f-28 {font-size: $font-28;}
.f-29 {font-size: $font-29;}
.f-30 {font-size: $font-30;}
.f-31 {font-size: $font-31;}
.f-32 {font-size: $font-32;}
.f-33 {font-size: $font-33;}
.f-34 {font-size: $font-34;}
.f-35 {font-size: $font-35;}
.f-36 {font-size: $font-36;}
.f-37 {font-size: $font-37;}
.f-38 {font-size: $font-38;}
.f-39 {font-size: $font-39;}
.f-40 {font-size: $font-40;}



.ml-1 {margin-left: 1%;}
.ml-2 {margin-left: 2%;}
.ml-3 {margin-left: 3%;}
.ml-4 {margin-left: 4%;}
.ml-5 {margin-left: 5%;}
.ml-6 {margin-left: 6%;}
.ml-7 {margin-left: 7%;}
.ml-8 {margin-left: 8%;}
.ml-9 {margin-left: 9%;}
.ml-10 {margin-left: 10%;}

.mr-1 {margin-right: 1%;}
.mr-2 {margin-right: 2%;}
.mr-3 {margin-right: 3%;}
.mr-4 {margin-right: 4%;}
.mr-5 {margin-right: 5%;}
.mr-6 {margin-right: 6%;}
.mr-7 {margin-right: 7%;}
.mr-8 {margin-right: 8%;}
.mr-9 {margin-right: 9%;}
.mr-10 {margin-right: 10%;}


.mt-1 {margin-top: 1%;}
.mt-2 {margin-top: 2%;}
.mt-3 {margin-top: 3%;}
.mt-4 {margin-top: 4%;}
.mt-5 {margin-top: 5%;}
.mt-6 {margin-top: 6%;}
.mt-7 {margin-top: 7%;}
.mt-8 {margin-top: 8%;}
.mt-9 {margin-top: 9%;}
.mt-10 {margin-top: 10%;}


.mb-1 {margin-bottom: 1%;}
.mb-2 {margin-bottom: 2%;}
.mb-3 {margin-bottom: 3%;}
.mb-4 {margin-bottom: 4%;}
.mb-5 {margin-bottom: 5%;}
.mb-6 {margin-bottom: 6%;}
.mb-7 {margin-bottom: 7%;}
.mb-8 {margin-bottom: 8%;}
.mb-9 {margin-bottom: 9%;}
.mb-10 {margin-bottom: 10%;}

.mx-1 {margin: 0 1%;}
.mx-2 {margin: 0 2%;}
.mx-3 {margin: 0 3%;}
.mx-4 {margin: 0 4%;}
.mx-5 {margin: 0 5%;}
.mx-6 {margin: 0 6%;}
.mx-7 {margin: 0 7%;}
.mx-8 {margin: 0 8%;}
.mx-9 {margin: 0 9%;}
.mx-10 {margin: 0 10%;}

.my-1 {margin-bottom: 1% 0;}
.my-2 {margin-bottom: 2% 0;}
.my-3 {margin-bottom: 3% 0;}
.my-4 {margin-bottom: 4% 0;}
.my-5 {margin-bottom: 5% 0;}
.my-6 {margin-bottom: 6% 0;}
.my-7 {margin-bottom: 7% 0;}
.my-8 {margin-bottom: 8% 0;}
.my-9 {margin-bottom: 9% 0;}
.my-10 {margin-bottom: 10% 0;}

.m-1 {margin: 1%;}
.m-2 {margin: 2%;}
.m-3 {margin: 3%;}
.m-4 {margin: 4%;}
.m-5 {margin: 5%;}
.m-6 {margin: 6%;}
.m-7 {margin: 7%;}
.m-8 {margin: 8%;}
.m-9 {margin: 9%;}
.m-10 {margin: 10%;}

.ml-5x {margin-left: 5px;}
.ml-10x {margin-left: 10px;}
.ml-15x {margin-left: 15px;}
.ml-20x {margin-left: 20px;}
.ml-21x {margin-left: 21px;}
.ml-22x {margin-left: 22px;}
.ml-23x {margin-left: 23px;}
.ml-24x {margin-left: 24px;}
.ml-25x {margin-left: 25px;}
.ml-26x {margin-left: 26px;}
.ml-27x {margin-left: 27px;}
.ml-28x {margin-left: 28px;}
.ml-29x {margin-left: 29px;}
.ml-30x {margin-left: 30px;}
.ml-35x {margin-left: 35px;}
.ml-40x {margin-left: 40px;}
.ml-45x {margin-left: 45px;}
.ml-46x {margin-left: 45px;}
.ml-47x {margin-left: 47px;}
.ml-48x {margin-left: 48px;}
.ml-49x {margin-left: 49px;}
.ml-50x {margin-left: 50px;}
.ml-51x {margin-left: 51px;}
.ml-52x {margin-left: 52px;}
.ml-53x {margin-left: 53px;}
.ml-54x {margin-left: 54px;}
.ml-55x {margin-left: 55px;}
.ml-56x {margin-left: 56px;}
.ml-57x {margin-left: 57px;}
.ml-58x {margin-left: 58px;}
.ml-59x {margin-left: 57px;}
.ml-60x {margin-left: 60px;}
.ml-64x {margin-left: 64px;}
.ml-73x {margin-left: 73px;}

.mr-5x {margin-right: 5px;}
.mr-10x {margin-right: 10px;}
.mr-15x {margin-right: 15px;}
.mr-20x {margin-right: 20px;}
.mr-25x {margin-right: 25px;}
.mr-30x {margin-right: 30px;}
.mr-35x {margin-right: 35px;}
.mr-40x {margin-right: 40px;}
.mr-45x {margin-right: 45px;}
.mr-50x {margin-right: 50px;}
.mr-55x {margin-right: 55px;}
.mr-64x {margin-right: 64px;}


.mt_3 {margin-top: -3px;}
.mt_2 {margin-top: -2px;}
.mt_1 {margin-top: -1px;}
.mt-1x {margin-top: 1px;}
.mt-2x {margin-top: 2px;}
.mt-3x {margin-top: 3px;}
.mt-4x {margin-top: 4px;}
.mt-5x {margin-top: 5px;}
.mt-6x {margin-top: 6px;}
.mt-7x {margin-top: 7px;}
.mt-8x {margin-top: 8px;}
.mt-9x {margin-top: 9px;}
.mt-10x {margin-top: 10px;}
.mt-11x {margin-top: 11px;}
.mt-12x {margin-top: 12px;}
.mt-13x {margin-top: 13px;}
.mt-14x {margin-top: 14px;}
.mt-15x {margin-top: 15px;}
.mt-16x {margin-top: 16px;}
.mt-17x {margin-top: 17px;}
.mt-18x {margin-top: 18px;}
.mt-19x {margin-top: 19px;}
.mt-20x {margin-top: 20px;}
.mt-21x {margin-top: 21px;}
.mt-22x {margin-top: 22px;}
.mt-23x {margin-top: 23px;}
.mt-24x {margin-top: 24px;}
.mt-25x {margin-top: 25px;}
.mt-26x {margin-top: 26px;}
.mt-27x {margin-top: 27px;}
.mt-28x {margin-top: 28px;}
.mt-29x {margin-top: 29px;}
.mt-30x {margin-top: 30px;}
.mt-35x {margin-top: 35px;}
.mt-40x {margin-top: 40px;}
.mt-45x {margin-top: 45px;}
.mt-46x {margin-top: 46px;}
.mt-47x {margin-top: 47px;}
.mt-48x {margin-top: 48px;}
.mt-49x {margin-top: 49px;}
.mt-50x {margin-top: 50px;}

.mb-5x {margin-bottom: 5px;}
.mb-10x {margin-bottom: 10px;}
.mb-15x {margin-bottom: 15px;}
.mb-20x {margin-bottom: 20px;}
.mb-21x {margin-bottom: 21px;}
.mb-22x {margin-bottom: 22px;}
.mb-23x {margin-bottom: 23px;}
.mb-24x {margin-bottom: 24px;}
.mb-25x {margin-bottom: 25px;}
.mb-26x {margin-bottom: 26px;}
.mb-27x {margin-bottom: 27px;}
.mb-28x {margin-bottom: 28px;}
.mb-29x {margin-bottom: 29px;}
.mb-30x {margin-bottom: 30px;}
.mb-35x {margin-bottom: 35px;}
.mb-40x {margin-bottom: 40px;}
.mb-41x {margin-bottom: 41px;}
.mb-42x {margin-bottom: 42px;}
.mb-43x {margin-bottom: 43px;}
.mb-44x {margin-bottom: 44px;}
.mb-45x {margin-bottom: 45px;}
.mb-46x {margin-bottom: 46px;}
.mb-47x {margin-bottom: 47px;}
.mb-48x {margin-bottom: 48px;}
.mb-49x {margin-bottom: 49px;}
.mb-50x {margin-bottom: 50px;}
.mb-51x {margin-bottom: 51px;}
.mb-52x {margin-bottom: 52px;}

.mx-5x {margin: 0 5px;}
.mx-10x {margin: 0 10px;}
.mx-15x {margin: 0 15px;}
.mx-16x {margin: 0 16px;}
.mx-17x {margin: 0 17px;}
.mx-18x {margin: 0 18px;}
.mx-19x {margin: 0 19px;}
.mx-20x {margin: 0 20px;}
.mx-21x {margin: 0 21px;}
.mx-22x {margin: 0 22px;}
.mx-23x {margin: 0 23px;}
.mx-24x {margin: 0 24px;}
.mx-25x {margin: 0 25px;}
.mx-30x {margin: 0 30px;}
.mx-35x {margin: 0 35px;}
.mx-40x {margin: 0 40px;}
.mx-45x {margin: 0 45px;}
.mx-50x {margin: 0 50px;}
.mx-51x {margin: 0 51px;}
.mx-52x {margin: 0 52px;}
.mx-53x {margin: 0 53px;}
.mx-54x {margin: 0 54px;}
.mx-55x {margin: 0 55px;}
.mx-64x {margin: 0 64px;}

.my-5x {margin: 5px 0 ;}
.my-10x {margin: 10px 0;}
.my-15x {margin: 15px 0;}
.my-20x {margin: 20px 0;}
.my-25x {margin: 25px 0;}
.my-30x {margin: 30px 0;}
.my-31x {margin: 31px 0;}
.my-32x {margin: 32px 0;}
.my-33x {margin: 33px 0;}
.my-34x {margin: 34px 0;}
.my-35x {margin: 35px 0;}
.my-40x {margin: 40px 0;}
.my-45x {margin: 45px 0;}
.my-50x {margin: 50px 0;}

.m-5x {margin: 5px;}
.m-10x {margin: 10px;}
.m-15x {margin: 15px;}
.m-20x {margin: 20px;}
.m-25x {margin: 25px;}
.m-30x {margin: 30px;}
.m-35x {margin: 35px;}
.m-40x {margin: 40px;}
.m-45x {margin: 45px;}
.m-50x {margin: 50px;}



.pl-1 {padding-left: 1%;}
.pl-2 {padding-left: 2%;}
.pl-3 {padding-left: 3%;}
.pl-4 {padding-left: 4%;}
.pl-5 {padding-left: 5%;}
.pl-6 {padding-left: 6%;}
.pl-7 {padding-left: 7%;}
.pl-8 {padding-left: 8%;}
.pl-9 {padding-left: 9%;}
.pl-10 {padding-left: 10%;}


.pr-1 {padding-right: 1%;}
.pr-2 {padding-right: 2%;}
.pr-3 {padding-right: 3%;}
.pr-4 {padding-right: 4%;}
.pr-5 {padding-right: 5%;}
.pr-6 {padding-right: 6%;}
.pr-7 {padding-right: 7%;}
.pr-8 {padding-right: 8%;}
.pr-9 {padding-right: 9%;}
.pr-10 {padding-right: 10%;}

.pt-1 {padding-top: 1%;}
.pt-2 {padding-top: 2%;}
.pt-3 {padding-top: 3%;}
.pt-4 {padding-top: 4%;}
.pt-5 {padding-top: 5%;}
.pt-6 {padding-top: 6%;}
.pt-7 {padding-top: 7%;}
.pt-8 {padding-top: 8%;}
.pt-9 {padding-top: 9%;}
.pt-10 {padding-top: 10%;}

.pb-1 {padding-bottom: 1%;}
.pb-2 {padding-bottom: 2%;}
.pb-3 {padding-bottom: 3%;}
.pb-4 {padding-bottom: 4%;}
.pb-5 {padding-bottom: 5%;}
.pb-6 {padding-bottom: 6%;}
.pb-7 {padding-bottom: 7%;}
.pb-8 {padding-bottom: 8%;}
.pb-9 {padding-bottom: 9%;}
.pb-10 {padding-bottom: 10%;}



.px-1 {padding:0 1%;}
.px-2 {padding:0 2%;}
.px-3 {padding:0 3%;}
.px-4 {padding:0 4%;}
.px-5 {padding:0 5%;}
.px-6 {padding:0 6%;}
.px-7 {padding:0 7%;}
.px-8 {padding:0 8%;}
.px-9 {padding:0 9%;}
.px-10 {padding:0 10%;}

.py-1 {padding: 1% 0;}
.py-2 {padding: 2% 0;}
.py-3 {padding: 3% 0;}
.py-4 {padding: 4% 0;}
.py-5 {padding: 5% 0;}
.py-6 {padding: 6% 0;}
.py-7 {padding: 7% 0;}
.py-8 {padding: 8% 0;}
.py-9 {padding: 9% 0;}
.py-10 {padding: 10% 0;}


.p-1 {padding: 1%;}
.p-2 {padding: 2%;}
.p-3 {padding: 3%;}
.p-4 {padding: 4%;}
.p-5 {padding: 5%;}
.p-6 {padding: 6%;}
.p-7 {padding: 7%;}
.p-8 {padding: 8%;}
.p-9 {padding: 9%;}
.p-10 {padding: 10%;}


.pl-1x {padding-left: 1px;}
.pl-2x {padding-left: 2px;}
.pl-3x {padding-left: 3px;}
.pl-4x {padding-left: 4px;}
.pl-5x {padding-left: 5px;}
.pl-6x {padding-left: 6px;}
.pl-7x {padding-left: 7px;}
.pl-8x {padding-left: 8px;}
.pl-9x {padding-left: 9px;}
.pl-10x {padding-left: 10px;}
.pl-15x {padding-left: 15px;}
.pl-20x {padding-left: 20px;}
.pl-21x {padding-left: 21px;}
.pl-22x {padding-left: 22px;}
.pl-23x {padding-left: 23px;}
.pl-24x {padding-left: 24px;}
.pl-25x {padding-left: 25px;}
.pl-30x {padding-left: 30px;}
.pl-35x {padding-left: 35px;}
.pl-36x {padding-left: 36px;}
.pl-37x {padding-left: 37px;}
.pl-38x {padding-left: 38px;}
.pl-39x {padding-left: 39px;}
.pl-40x {padding-left: 40px;}
.pl-45x {padding-left: 45px;}
.pl-50x {padding-left: 50px;}

.pr-1x {padding-right: 1px;}
.pr-2x {padding-right: 2px;}
.pr-3x {padding-right: 3px;}
.pr-4x {padding-right: 4px;}
.pr-5x {padding-right: 5px;}
.pr-6x {padding-right: 6px;}
.pr-7x {padding-right: 7px;}
.pr-8x {padding-right: 8px;}
.pr-9x {padding-right: 9px;}
.pr-10x {padding-right: 10px;}
.pr-15x {padding-right: 15px;}
.pr-20x {padding-right: 20px;}
.pr-25x {padding-right: 25px;}
.pr-30x {padding-right: 30px;}
.pr-35x {padding-right: 35px;}
.pr-40x {padding-right: 40px;}
.pr-45x {padding-right: 45px;}
.pr-50x {padding-right: 50px;}
.pr-124x {padding-right: 124px;}
.pr-125x {padding-right: 125px;}
.pr-126x {padding-right: 126px;}
.pr-127x {padding-right: 127px;}
.pr-128x {padding-right: 128px;}
.pr-129x {padding-right: 129px;}
.pr-130x {padding-right: 130px;}
.pr-131x {padding-right: 131px;}
.pr-132x {padding-right: 132px;}
.pr-133x {padding-right: 133px;}
.pr-134x {padding-right: 134px;}
.pr-135x {padding-right: 135px;}
.pr-136x {padding-right: 136px;}
.pr-137x {padding-right: 137px;}
.pr-138x {padding-right: 138px;}
.pr-139x {padding-right: 139px;}
.pr-140x {padding-right: 140px;}

.pt-1x {padding-top: 1px;}
.pt-2x {padding-top: 2px;}
.pt-3x {padding-top: 3px;}
.pt-4x {padding-top: 4px;}
.pt-5x {padding-top: 5px;}
.pt-6x {padding-top: 6px;}
.pt-7x {padding-top: 7px;}
.pt-8x {padding-top: 8px;}
.pt-9x {padding-top: 9px;}
.pt-10x {padding-top: 10px;}
.pt-11x {padding-top: 11px;}
.pt-15x {padding-top: 15px;}
.pt-20x {padding-top: 20px;}
.pt-21x {padding-top: 21px;}
.pt-22x {padding-top: 22px;}
.pt-23x {padding-top: 23px;}
.pt-24x {padding-top: 24px;}
.pt-25x {padding-top: 25px;}
.pt-30x {padding-top: 30px;}
.pt-31x {padding-top: 31px;}
.pt-32x {padding-top: 32px;}
.pt-33x {padding-top: 33px;}
.pt-34x {padding-top: 34px;}
.pt-35x {padding-top: 35px;}
.pt-40x {padding-top: 40px;}
.pt-45x {padding-top: 45px;}
.pt-50x {padding-top: 50px;}

.pb-5x {padding-bottom: 5px;}
.pb-10x {padding-bottom: 10px;}
.pb-11x {padding-bottom: 11px;}
.pb-12x {padding-bottom: 12px;}
.pb-13x {padding-bottom: 13px;}
.pb-14x {padding-bottom: 14px;}
.pb-15x {padding-bottom: 15px;}
.pb-20x {padding-bottom: 20px;}
.pb-25x {padding-bottom: 25px;}
.pb-30x {padding-bottom: 30px;}
.pb-31x {padding-bottom: 31px;}
.pb-32x {padding-bottom: 32px;}
.pb-33x {padding-bottom: 33px;}
.pb-34x {padding-bottom: 34px;}
.pb-35x {padding-bottom: 35px;}
.pb-36x {padding-bottom: 36px;}
.pb-37x {padding-bottom: 37px;}
.pb-38x {padding-bottom: 38px;}
.pb-39x {padding-bottom: 39px;}
.pb-40x {padding-bottom: 40px;}
.pb-45x {padding-bottom: 45px;}
.pb-50x {padding-bottom: 50px;}
.pb-55x {padding-bottom: 55px;}
.pb-60x {padding-bottom: 60px;}
.pb-65x {padding-bottom: 65px;}
.pb-70x {padding-bottom: 70px;}
.pb-71x {padding-bottom: 71px;}
.pb-72x {padding-bottom: 72px;}
.pb-73x {padding-bottom: 73px;}
.pb-74x {padding-bottom: 74px;}
.pb-75x {padding-bottom: 75px;}
.pb-76x {padding-bottom: 76px;}
.pb-80x {padding-bottom: 80px;}
.pb-90x {padding-bottom: 90px;}
.pb-95x {padding-bottom: 95px;}
.pb-100x {padding-bottom: 100px;}



.p-5x {padding: 5px;}
.p-10x {padding: 10px;}
.p-15x {padding: 15px;}
.p-20x {padding: 20px;}
.p-25x {padding: 25px;}
.p-30x {padding: 30px;}
.p-35x {padding: 35px;}
.p-40x {padding: 40px;}
.p-45x {padding: 45px;}
.p-50x {padding: 50px;}


.py-5x {padding: 5px 0;}
.py-10x {padding: 10px 0;}
.py-15x {padding: 15px 0;}
.py-20x {padding: 20px 0;}
.py-25x {padding: 25px 0;}
.py-30x {padding: 30px 0;}
.py-31x {padding: 31px 0;}
.py-32x {padding: 32px 0;}
.py-33x {padding: 33px 0;}
.py-34x {padding: 34px 0;}
.py-35x {padding: 35px 0;}
.py-40x {padding: 40px 0;}
.py-45x {padding: 45px 0;}
.py-50x {padding: 50px 0;}

.px-5x {padding: 0 5px;}
.px-10x {padding: 0 10px;}
.px-15x {padding: 0 15px;}
.px-20x {padding: 0 20px;}
.px-25x {padding: 0 25px;}
.px-30x {padding: 0 30px;}
.px-35x {padding: 0 35px;}
.px-40x {padding: 0 40px;}
.px-45x {padding: 0 45px;}
.px-50x {padding: 0 50px;}

.line-10 {line-height: 10px;}
.line-15 {line-height: $font-15;}
.line-20 {line-height: $font-20;}
.line-21 {line-height: $font-21;}
.line-22 {line-height: $font-22;}
.line-23 {line-height: $font-23;}
.line-24 {line-height: $font-24;}
.line-25 {line-height: $font-25;}
.line-26 {line-height: $font-26;}
.line-27 {line-height: $font-27;}
.line-28 {line-height: $font-28;}
.line-29 {line-height: $font-29;}
.line-30 {line-height: $font-30;}
.line-31 {line-height: $font-31;}
.line-32 {line-height: $font-32;}
.line-33 {line-height: $font-33;}
.line-34 {line-height: $font-34;}
.line-35 {line-height: $font-35;}
.line-36 {line-height: $font-36;}
.line-37 {line-height: $font-37;}
.line-38 {line-height: $font-38;}
.line-39 {line-height: $font-39;}
.line-40 {line-height: $font-40;}
.line-41 {line-height: 41px;}
.line-42 {line-height: 42px;}
.line-43 {line-height: 43px;}
.line-44 {line-height: 44px;}
.line-45 {line-height: 45px;}
.line-46 {line-height: 46px;}
.line-47 {line-height: 47px;}
.line-48 {line-height: 48px;}
.line-49 {line-height: 49px;}
.line-50 {line-height: 50px;}
.line-55 {line-height: 55px;}



.w-full {width: 100%;}
.h-full {height: 100%;}

.w-5 {width: $w-5;}
.w-10 {width: $w-10;}
.w-15 {width: $w-15;}
.w-20 {width: $w-20;}
.w-25 {width: $w-25;}
.w-30 {width: $w-30;}
.w-35 {width: $w-35;}
.w-40 {width: $w-40;}
.w-45 {width: $w-45;}
.w-50 {width: $w-50;}
.w-55 {width: $w-55;}
.w-60 {width: $w-60;}
.w-65 {width: $w-65;}
.w-70 {width: $w-70;}
.w-75 {width: $w-75;}
.w-80 {width: $w-80;}
.w-85 {width: $w-85;}
.w-90 {width: $w-90;}
.w-95 {width: $w-95;}
.w-100 {width: $w-100;}
.w-150 {width: $w-150;}
.w-200 {width: $w-200;}
.w-250 {width: $w-250;}
.w-300 {width: $w-300;}
.w-299 {width: 299px;}
.w-302 {width: 302px;}
.w-310 {width: 310px;}
.w-320 {width: 320px;}
.w-321 {width: 321px;}
.w-330 {width: 330px;}

.h-5 {height: $w-5;}
.h-10 {height: $w-10;}
.h-15 {height: $w-15;}
.h-16 {height: $w-16;}
.h-17 {height: $w-17;}
.h-18 {height: $w-18;}
.h-19 {height: $w-19;}
.h-20 {height: $w-20;}
.h-25 {height: $w-25;}
.h-30 {height: $w-30;}
.h-35 {height: $w-35;}
.h-40 {height: $w-40;}
.h-45 {height: $w-45;}
.h-50 {height: $w-50;}
.h-55 {height: $w-55;}
.h-60 {height: $w-60;}
.h-65 {height: $w-65;}
.h-70 {height: $w-70;}
.h-75 {height: $w-75;}
.h-80 {height: $w-80;}
.h-85 {height: $w-85;}
.h-90 {height: $w-90;}
.h-95 {height: $w-95;}
.h-100 {height: $w-100;}
.h-150 {height: $w-150;}
.h-200 {height: $w-200;}
.h-250 {height: $w-250;}
.h-300 {height: $w-300;}

.br-5 {border-radius: 5px;}
.br-10 {border-radius: 10px;}
.br-15 {border-radius: 15px;}
.br-20 {border-radius: 20px;}
.br-25 {border-radius: 25px;}
.br-30 {border-radius: 30px;}
.br-35 {border-radius: 35px;}

.word-1 {word-spacing: 1px;}
.word-05 {word-spacing: .5px;}
.word-08 {word-spacing: .8px;}
.word {word-spacing: -0.5px;}


.words {
  display: inline-block;
  font-size: 13px;
  background: linear-gradient(grey, grey) no-repeat;
  background-size: 100% 1px;
  background-position: 0 1.3em;
  text-shadow: 0.05em 0 #fff, -0.05em 0 #fff;
}

// 测试颜色
.red { background: lightcoral;}
.blue { background: lightblue;}
.green { background: lightgreen;}

// 测试背景
.bg-white {background: #fff;}
.bg-fff {background: #fff;}
.bg-black {background: black;}
.bg-ccc {background: #ccc;}

.ccc {color: #ccc;}
.fff {color: #fff;}


.self-abs {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

